import { history } from 'umi';
import React from 'react';
import { NavBar, Button, Form, Input, Toast } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './price.less';

const goBack = () => {
  history.back();
}

export default function PricePage() {
  const [form] = Form.useForm()
  return (
    <div className='price'>
      <NavBar title='修改单价' leftText='返回' onClickLeft={goBack} />
      <div className='container'>
        <Form form={form} className='price-form'>
          <Form.Item
            name='type1'
            prefix={
              <div className='price-type'>
                <img className='type-icon' width='32' height='32' src='//res.dayupp.com/partner/ce256b9a6227ae7a77f7c470f495e488.png'
                     alt='' />
                <p>线下开黑</p>
              </div>
            }
            suffix={<Button type='primary' size='small' round color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={() => Toast.info('修改成功')}>修改</Button>}
            intro='默认价格 210 元/小时，可设置价格区间 150 ~ 300 元/小时'
          >
            <Input className='price-input' type='number' placeholder='请输入到手价格' align='center' maxLength={3} />
          </Form.Item>
        </Form>
        <Form form={form} className='price-form'>
          <Form.Item
            name='type2'
            prefix={
              <div className='price-type'>
                <img className='type-icon' width='32' height='32' src='//res.dayupp.com/partner/59809efe258fbcc037298776bdd41b6b.png'
                     alt='' />
                <p>线上陪练</p>
              </div>
            }
            suffix={<Button type='primary' size='small' round color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={() => Toast.info('修改成功')}>修改</Button>}
            intro='默认价格 80 元/小时，可设置价格区间 50 ~ 150 元/小时'
          >
            <Input className='price-input' type='number' placeholder='请输入到手价格' align='center' maxLength={3} />
          </Form.Item>
        </Form>
        <Form form={form} className='price-form'>
          <Form.Item
            name='type3'
            prefix={
              <div className='price-type'>
                <img className='type-icon' width='32' height='32' src='//res.dayupp.com/partner/a996962cdf0789e3749f11aca41a5b3f.png'
                     alt='' />
                <p>共进晚餐</p>
              </div>
            }
            suffix={<Button type='primary' size='small' round color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={() => Toast.info('修改成功')}>修改</Button>}
            intro='默认价格 198 元/小时，可设置价格区间 100 ~ 300 元/小时'
          >
            <Input className='price-input' type='number' placeholder='请输入到手价格' align='center' maxLength={3} />
          </Form.Item>
        </Form>
        <Form form={form} className='price-form'>
          <Form.Item
            name='type4'
            prefix={
              <div className='price-type'>
                <img className='type-icon' width='32' height='32' src='//res.dayupp.com/partner/13e9c6b3a1ea7ab9741ff1c8c086bbd5.png'
                     alt='' />
                <p>微醺小酌</p>
              </div>
            }
            suffix={<Button type='primary' size='small' round color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={() => Toast.info('修改成功')}>修改</Button>}
            intro='默认价格 240 元/小时，可设置价格区间 180 ~ 400 元/小时'
          >
            <Input className='price-input' type='number' placeholder='请输入到手价格' align='center' maxLength={3} />
          </Form.Item>
        </Form>
        <Form form={form} className='price-form'>
          <Form.Item
            name='type5'
            prefix={
              <div className='price-type'>
                <img className='type-icon' width='32' height='32' src='//res.dayupp.com/partner/a20a94966c2fa6dd31413c55334e3894.png'
                     alt='' />
                <p>一起观影</p>
              </div>
            }
            suffix={<Button type='primary' size='small' round color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={() => Toast.info('修改成功')}>修改</Button>}
            intro='默认价格 120 元/小时，可设置价格区间 80 ~ 200 元/小时'
          >
            <Input className='price-input' type='number' placeholder='请输入到手价格' align='center' maxLength={3} />
          </Form.Item>
        </Form>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
